<template>
	<view class="container">
		<view class="TopBox">
			<view class="Indexbox">
				<view class="box1">
					<text>{{name}}</text>
				</view>
				<view class="index2">
					<view class="pickTime">
						<uni-datetime-picker @change="changeTime" type="date" :clear-icon="false" v-model="ordertime" />
					</view>
					<view class="picker">
						<hpy-form-select :dataList="storelist" text="name" name="name" v-model="SelectMenDian"
							@change="changeStore" />
					</view>
				</view>
				<view class="databox">
					<view class="left">
						<text class="index1">订单</text>
						<view class="info">
							<text>{{totalOrderNum}}</text>
							<text>个</text>
						</view>
					</view>
					<view class="right">
						<text class="index1">营业额</text>
						<view class="info">
							<text class="red">{{gross_profit}}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="onlinedesk">
					<view class="left">
						<text>在线桌台:</text>
						<text class="num">{{UseringBilliards}}</text>
						<text class="num">/{{TotalBilliards}}</text>
					</view>
					<view class="right">
						<text>空余桌台:</text>
						<text class="num">{{AvailableBilliards}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="centerBox">
			<view class="one">
				<view class="list one" @click="turnToDeskManage">
					<text>球桌管理</text>
				</view>
				<view class="list two" @click="turnToGoods">
					<text>商品管理</text>
				</view>
			</view>
			<view class="one">
				<view class="list three" @click="toChuXiao">
					<text>优惠券管理</text>
				</view>
				<view class="list four" @click="turnToTeachers">
					<text>助教管理</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storelist: [],
				SelectMenDian: '',
				name: '请选择门店',
				storeTime: '',
				year: '',
				month: '',
				day: '',
				totalOrderNum:0,
				gross_profit:0,
				deskdata:[],
				AvailableBilliards:0,
				TotalBilliards:0,
				UseringBilliards:0,
			}
		},
		onShow() {
			this.getStoreList();
			this.getYingYeEdata();
			this.getDeskdata()
		},
		methods: {
			async getDeskdata() {
				// let data = {									
				// 	storeId:uni.getStorageSync('storeId')
				// }
				const {
					data: res
				} = await uni.$http.post(`/cashier/getStoreCashier?storeId=${uni.getStorageSync('storeId')}`);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '球桌数据');				
				this.deskdata = res.data;
				this.AvailableBilliards=this.deskdata.AvailableBilliards;
				this.TotalBilliards=this.deskdata.TotalBilliards;
				this.UseringBilliards=this.deskdata.UseringBilliards;
				// uni.setStorageSync('storeId', res.data[0].id)
				// uni.setStorageSync('MenDianList', res.data)
				// uni.setStorageSync("SelectMenDian", res.data[0].id)
			},
			async getYingYeEdata() {
				let data = {
					day: this.day,
					month: this.month,
					storeId: uni.getStorageSync('storeId'),
					year: this.year,
				};
				const {
					data: res
				} = await uni.$http.post(`/store/turnoverQueryByDate`, data);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '营业额');	
				this.gross_profit=res.data.gross_profit;
				this.totalOrderNum=res.data.totalOrderNum;
			},
			changeTime(e) {
				console.log(e);
				const arr = e.split('-')
				console.log(arr);
				this.year = arr[0];
				this.month = arr[1];
				this.day = arr[2];
				this.getYingYeEdata()
			},
			changeStore(e) {
				console.log(e);
				uni.setStorageSync('storeId', e.data.id)
				this.name = e.data.name
				this.getDeskdata()
			},
			bindPickerChange(e) {
				console.log(e.detail);
			},
			//跳转促销活动 
			toChuXiao() {
				uni.navigateTo({
					url: '/subpkg/promition/Index'
				})
				// console.log(222)
			},
			async getStoreList() {
				let data = {
					token: uni.getStorageSync('token'),
				}
				const {
					data: res
				} = await uni.$http.post(`/store/storeQuery`, data);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '门店列表');
				console.log(res.data[0].id);
				this.storelist = res.data;
				uni.setStorageSync('storeId', res.data[0].id)
				this.name=res.data[0].name;
				// uni.setStorageSync('MenDianList', res.data)
				// uni.setStorageSync("SelectMenDian", res.data[0].id)
			},
			turnToTeachers() {
				uni.navigateTo({
					url: "/subpkg/TeacherManage/TeacherManage"
				})
			},
			turnToGoods() {
				uni.navigateTo({
					url: `/subpkg/GoodsManage/GoodsManage`
				})
			},
			turnToDeskManage() {
				uni.navigateTo({
					url: "/subpkg/DeskManage/DeskManage"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f9fc;
	}
	
	.pickTime {
		width: 250rpx;
	}

	.picker {
		margin-left: 20px;
		width: 260rpx;
	}

	.centerBox {
		margin-top: 3vh;

		.one,
		.two {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 1vh;

			.one {
				background-color: #2a82e4;
			}

			.two {
				background-color: #ff8d1a;
			}

			.three {
				background-color: #7c58cf;
			}

			.four {
				background-color: #2a82e4;
			}
		}

		.list {
			width: 33vw;
			height: 13vh;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 2vw;
			color: #fff;
			font-weight: 700;
		}

	}

	.onlinedesk {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 8vh;
		color: #45484a;
		font-weight: 700;

		.num {
			font-size: 5vw;
		}

		.left {
			text:nth-child(2) {
				color: #2a82e4;
			}
		}

		.right {
			text:nth-child(2) {
				color: #2a82e4;
			}
		}
	}

	.databox {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 2vh;

		.index1 {
			color: #a0a5aa;
		}

		.left,
		.right {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}

		.info {
			margin-top: 2vh;

			text:nth-child(1) {
				font-size: 10vw;
			}

			.red {
				color: #ff0000;
			}
		}
	}

	.TopBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.index2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2vh;
	}

	.Indexbox {
		width: 85%;
		height: 45vh;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
		border: 1rpx dashed #2a82e4;
		margin-top: 3vh;

		.box1 {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 5vw;
			font-weight: 700;
			color: #2a82e4;
		}

		.change {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			border: 1rpx solid #ff8d1a;
			color: #ff8d1a;
			padding: 15rpx;
			font-size: 25rpx;
			margin-top: 2vh;
		}
	}
</style>